<template>
  <div>
    <RoleList
      v-if="isShowRoleList"
      @setIsShowRoleList="isShowRoleList = $event"
      @setRole="role = $event"
    />
    <AssignRole v-else @setIsShowRoleList="isShowRoleList = $event" :role="role" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Role',
  });
</script>

<script lang="ts" setup>
  import { ref } from 'vue';
  import RoleList from './components/RoleList.vue';
  import AssignRole from './components/AssignRole.vue';
  import { RoleModel } from '/@/api/acl/model/roleModel';

  const isShowRoleList = ref<boolean>(true);
  const role = ref<RoleModel>({
    roleName: '',
    id: '',
  });
</script>
